<template>
  <div id="process">
    <div class="list-wrap">
      <div class="item">
        <tab :line-width=2 v-model="index" ref="tab">
          <tab-item :scroll-threshold="scrollThreshold" @on-item-click="switchTabItem" prevent-default="true" class="vux-center" v-for="(item, index) in listLabel" :key="index">{{item.label}}</tab-item>
        </tab>
        <div>
          <swiper :threshold="threshold" :min-moving-distance="MovingDistance" v-model="index" :show-dots="false" :height="`${contentHeight}px`">
            <swiper-item>
              <div class="tab-swiper" :style="{height:`${contentHeight}px`,overflowY:'auto',overflowX:'hidden'}">
                <scroller :on-refresh="refresh" :on-infinite="infinite" ref='my_scroller' :noDataText='noDataText' :refreshText='refreshText'>
                  <group v-for="(item,index) in list" :key="index" @click.native="toPageDetail(88)">
                    <cell title="总价" :value="item.totalPrice"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </scroller>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="tab-swiper" :style="{height:`${contentHeight}px`,overflowY:'auto',overflowX:'hidden'}">
                <scroller :on-refresh="refresh1" :on-infinite="infinite1" ref='my_scroller1' :noDataText='noDataText' :refreshText='refreshText'>
                  <div v-for="(item, index) in items1" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index">
                    {{ item }}
                  </div>
                </scroller>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="tab-swiper" :style="{height:`${contentHeight}px`,overflowY:'auto',overflowX:'hidden'}">
                <scroller :on-refresh="refresh2" :on-infinite="infinite2" ref='my_scroller2' :noDataText='noDataText' :refreshText='refreshText'>
                  <div v-for="(item, index) in items2" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index">
                    {{ item }}
                  </div>
                </scroller>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="tab-swiper" :style="{height:`${contentHeight}px`,overflowY:'auto',overflowX:'hidden'}">
                <scroller :on-refresh="refresh3" :on-infinite="infinite3" ref='my_scroller3' :noDataText='noDataText' :refreshText='refreshText'>
                  <div v-for="(item, index) in items3" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index">
                    {{ item }}
                  </div>
                </scroller>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="tab-swiper" :style="{height:`${contentHeight}px`,overflowY:'auto',overflowX:'hidden'}">
                <scroller :on-refresh="refresh4" :on-infinite="infinite4" ref='my_scroller4' :noDataText='noDataText' :refreshText='refreshText'>
                  <div v-for="(item, index) in items4" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index">
                    {{ item }}
                  </div>
                </scroller>
              </div>
            </swiper-item>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import getUrl from "../../../static/js/getUrl.js";
  import Vue from "vue";
  import VueScroller from "vue-scroller";
  Vue.use(VueScroller);
  import apis from '../../../static/js/api.js'
  import {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    CellFormPreview,
    Group,
    Cell
  } from "vux";
  export default {
    components: {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      CellFormPreview,
      Group,
      Cell
    },
    data() {
      return {
        empty: "暂无相关数据",
        index: 0,
        listLabel: [],
        listArr: null,
        contentHeight: 0,
        page: 1,
        pagesize: 10,
        scrollThreshold: 200,
        threshold: 100,
        MovingDistance: 1000,
        items: [],
        items1: [],
        items2: [],
        items3: [],
        items4: [],
        noDataText: "我是有底线的",
        refreshText: "下拉刷新",
        list: []
      };
    },
    computed: {},
    created() {
      this.getUserType();
      this.postListArr();
    },
    mounted() {
      let clientHeight = document.documentElement.clientHeight;
      let tabHeight = this.$refs.tab.$el.offsetHeight;
      this.contentHeight = clientHeight - tabHeight;
      for (var i = 1; i <= 20; i++) {
        this.items.push(i + " - 我是第1项的初始化数据.");
        this.items1.push(i + " -我是第2项的初始化数据.");
        this.items2.push(i + " - 我是第3项的初始化数据.");
        this.items3.push(i + " - 我是第4项的初始化数据.");
        this.items4.push(i + " - 我是第5项的初始化数据.");
      }
      this.top = 1;
      this.bottom = 20;
    },
    methods: {
      // 获取用户类型
      getUserType() {
        let url = getUrl().userType;
        let changeArr = url.split("_");
        let backArr = [];
        changeArr.forEach(item => {
          let obj = {};
          if (item === "1") {
            obj.type = "1";
            obj.label = "待接单";
          } else if (item === "2") {
            obj.type = "2";
            obj.label = "待加工";
          } else if (item === "3") {
            obj.type = "3";
            obj.label = "待包装";
          } else if (item === "4") {
            obj.type = "4";
            obj.label = "待发货";
          } else if (item === "5") {
            obj.type = "5";
            obj.label = "已完成";
          }
          backArr.push(obj);
        });
        this.listLabel = backArr;
      },
      // 获取列表数据
      postListArr() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "1",
                page: this.page,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            console.log('这是是否加工的数据', response.data);
            this.list = response.data;
          })
          .catch(error => {
            console.log(error);
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
      },
      // 切换tab时设置发送新的请求
      switchTabItem(index) {
        console.log("index", index);
        this.index = index;
      },
      // 下拉刷新
      refresh(done) {
        // alert('这是更新的请求')
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "1",
                page: 1,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            alert('更新完成')
            
            // this.$vux.loading.hide();
            // console.log('这是是否加工的数据', response.data);
            this.list = response.data;
            this.$refs.my_scroller.finishPullToRefresh();
            done();
          })
          .catch(error => {
            console.log(error);
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
      },
      // 加载更多
      infinite(done) {
        // alert('加载更多')
        this.$refs.my_scroller.resize()
        this.page++;
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "1",
                page: this.page,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            // this.$vux.loading.hide();
            if (response.data.length < 10) {
              this.list = this.list.concat(response.data);
              this.$refs.my_scroller.finishInfinite(true);
              return;
            }
            alert('加载更多完成')
            this.list = this.list.concat(response.data);
            console.log(this.list.length)
            done();
          })
          .catch(error => {
            console.log(error);
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
        // if (this.items.length > 40) {
        //   this.$refs.my_scroller.finishInfinite(true);
        //   return;
        // }
        // var self = this;
        // setTimeout(function() {
        //   var start = self.bottom + 1;
        //   for (var i = start; i < start + 10; i++) {
        //     self.items.push(i + " 我是第1项更多的数据.");
        //   }
        //   self.bottom = self.bottom + 10;
        //   done();
        // }, 1500);
      },
      refresh1(done) {
        if (this.items1.length > 40) {
          this.refreshText = "已经是最新的数据了";
          this.$refs.my_scroller1.finishPullToRefresh();
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.top - 1;
          for (var i = start; i > start - 10; i--) {
            self.items1.splice(0, 0, i + " 我是第2项刷新的数据");
          }
          self.top = self.top - 10;
          done();
        }, 100);
      },
      refresh2(done) {
        if (this.items2.length > 40) {
          this.refreshText = "已经是最新的数据了";
          this.$refs.my_scroller2.finishPullToRefresh();
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.top - 1;
          for (var i = start; i > start - 10; i--) {
            self.items2.splice(0, 0, i + " 我是第3项刷新的数据.");
          }
          self.top = self.top - 10;
          done();
        }, 1500);
      },
      refresh3(done) {
        if (this.items3.length > 40) {
          this.refreshText = "已经是最新的数据了";
          this.$refs.my_scroller3.finishPullToRefresh();
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.top - 1;
          for (var i = start; i > start - 10; i--) {
            self.items3.splice(0, 0, i + " 我是第4项刷新的数据.");
          }
          self.top = self.top - 10;
          done();
        }, 1500);
      },
      refresh4(done) {
        if (this.items4.length > 40) {
          this.refreshText = "已经是最新的数据了";
          this.$refs.my_scroller4.finishPullToRefresh();
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.top - 1;
          for (var i = start; i > start - 10; i--) {
            self.items4.splice(0, 0, i + " 我是第5项刷新的数据.");
          }
          self.top = self.top - 10;
          done();
        }, 1500);
      },
      // 滚动加载更多
      infinite1(done) {
        if (this.items1.length > 40) {
          this.$refs.my_scroller1.finishInfinite(true);
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.bottom + 1;
          for (var i = start; i < start + 10; i++) {
            self.items1.push(i + " - 我是第2项更多的数据.");
          }
          self.bottom = self.bottom + 10;
          done();
        }, 1500);
      },
      infinite2(done) {
        if (this.items2.length > 40) {
          this.$refs.my_scroller2.finishInfinite(true);
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.bottom + 1;
          for (var i = start; i < start + 10; i++) {
            self.items2.push(i + " -我是第3项更多的数据.");
          }
          self.bottom = self.bottom + 10;
          done();
        }, 1500);
      },
      infinite3(done) {
        if (this.items3.length > 40) {
          this.$refs.my_scroller3.finishInfinite(true);
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.bottom + 1;
          for (var i = start; i < start + 10; i++) {
            self.items3.push(i + " - 我是第4项更多的数据.");
          }
          self.bottom = self.bottom + 10;
          done();
        }, 1500);
      },
      infinite4(done) {
        if (this.items4.length > 40) {
          this.$refs.my_scroller4.finishInfinite(true);
          return;
        }
        var self = this;
        setTimeout(function() {
          var start = self.bottom + 1;
          for (var i = start; i < start + 10; i++) {
            self.items4.push(i + " - 我是第5项更多的数据.");
          }
          self.bottom = self.bottom + 10;
          done();
        }, 1500);
      },
      toPageDetail(id, status) {
        this.$router.push({
          path: "/detail/" + id,
          query: {
            status: status
          }
        });
      }
    }
  };
</script>

<style scoped>
  .tab-swiper {
    background-color: rgba(160, 161, 165, 0);
  }
  .row {
    width: 100%;
    height: 50px;
    padding: 10px 0;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #444;
    background-color: #fff;
  }
  .grey-bg {
    background-color: #eee;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    height: 44px;
    width: 100%;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 1000;
    color: #666;
  }
  .header>.title {
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    margin: 0 auto;
  }
</style>
